<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			display: flex;
		}
		.list{
			width: 300px;
		}
		.main{
			width: 600px;
			border: 1px solid black;
		}
		button{
			width: 100%;
			height: 50px;
		}
		li{
			list-style: none;
			width: 100px;
			height: 100px;
			border: 1px solid black;
			box-sizing: border-box;
			line-height: 100px;
			text-align: center;
			float: left;
		}
		.active{
			background: red;
			color: white;
		}
	</style>
</head>
<body>
	<div class="list">
		<h2>天选之子</h2>
	</div>
	<div class="main">
		<button>开始</button>
		<ul class="content">

		</ul>
	</div>
	<script type="text/javascript">
		let data = ["孙悟空", "唐僧", "猪八戒", "沙僧", "白龙马", "观音菩萨", "如来佛祖", "玉皇大帝", "太白金星", "牛魔王", "铁扇公主", "红孩儿", "二郎神", "哪吒", "托塔天王", "蜘蛛精","白骨精", "金角大王", "银角大王"]
		let btn = document.querySelector('button')
		let content = document.querySelector('.content')
		let list = document.querySelector('.list')
		let index = null
		//定时器
		let time = null

		//将数据渲染到页面
		function createLi(){
			//每次渲染先把原来的清除
			content.innerHTML = ''
			for (let i = 0; i < data.length; i++) {
				let newLi = document.createElement('li')
				newLi.innerText = data[i]
				content.appendChild(newLi)
			}
			document.querySelectorAll('li')[0].className = 'active'
		}
		createLi()

		//
		btn.onclick = function() {
			//点击开始抽取
			if (this.innerText == '开始' && data.length > 0) {
				if (index != null) {
					data.splice(index, 1)
					//重新渲染界面
					createLi()
				}
				if (data.length > 0) {
					prize()
					this.innerText = '结束'
				}
			}else{
				clearInterval(time)
				this.innerText = '开始'
				let h2 = document.createElement('h2')
				h2.innerText = data[index]
				list.appendChild(h2)
			}
		}

		//封装抽奖的方法
		function prize() {
			let lis = document.querySelectorAll('li')
			time = setInterval(function() {
				document.querySelector('.active').className = ""
				index = parseInt(Math.random()*data.length)
				lis[index].className = 'active'
			},250)
		}
	</script>
</body>
</html>